* { font-family: "Arial"; font-size: .7vw; margin: 0; padding: 0; color: #3e506a; border: none; }
body { background: #e0e7ee; }
aside,
article,
figure { border: 1px solid #bac6d6; border-radius: 3px; }
div { padding: 1vw; background: #fff; }
h3 { font-size: 2.2rem; display: block; padding: 15px; border-bottom: 1px solid #bac6d6; background: #f0f4f7; }
a { text-decoration: none; }

header { position: relative; display: flex; overflow: hidden; height: 90px; background: #3e506a; align-items: center; }
header > img { height: 62px; margin: 0 2vw; }
header > h1 { font-size: 4.2rem; font-weight: normal; font-style: italic; color: #fff; }
header > nav { position: absolute; right: 2vw; bottom: 0; }
header > nav > a { font-size: 2.6rem; padding: .78125vw 2.34375vw; color: #9eb8d8; border: 1px solid #27364b; border-bottom: none; background: #485c7a; }
header > nav > a.active,
header > nav > a:hover { color: #3e506a; background: #eff3f7; }
header > nav > a > img { width: 1vw; margin-right: .78125vw; }

section {display: flex;  margin: 1vw; justify-content: space-between; flex-wrap: wrap; }
section > aside { width: 20vw; }
section > aside > div { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 2vw; justify-content: space-evenly; }
section > article { width: 75vw; }
section > figure { width: 98vw; margin-top: 1vw; }

